// # AlertView
// ##author pengguangzong
// 弹出提示框
// ios底部滑出的效果
// TODO 补充ios样式，目前ratchet中没有这个效果，需要从其他框架样式中移植
//
// ## 配置
//
// 变量 | 类型 | required | 描述
// ----|------|----------|-----
// message  | string | true | 提示语言
// duration | number | false| 持续时间 (毫秒)
// style | info,well,warning,error | false | 提示框的样式, default: info
// 例子：
//
// ```js
// {
//     type: "AlertView",
//     message: "出错了！"
// }
// ```
////
define(['./BaseView', 'backbone', 'spin'], function(BaseView, Backbone, Spinner){

  return BaseView.extend({

    type: 'AlertView',

    // TODO 使用一个好的样式来表示消息提示框
    // message: 'message'
    // triggerEvent: 'my:event'
    configure: function(options){
      this.el.classList.add(this.style);
      this.el.innerHTML = options.message;
      document.body.appendChild(this.el);
      if (this.showSpin) this.spinner = new Spinner({
          left: '20px',
          lines: 7,
          speed: 1.3,
          length: 3,
          radius: 3,
          color: '#666'
      }).spin(this.el);
    },
    // clear timeout handler
    clear: function()
    {
      if (this.timeout) {
        clearTimeout(this.timeout);
      };
      if (this.spinner) this.spinner.stop();
    },

    show: function(){
        this.el.classList.add('active');
        if (this.autoDismiss) {
            var me = this;
            this.timeout = setTimeout(function(){
                me.dismiss();
            }, this.duration);
        };
    },

    dismiss: function(){
			this.el.classList.remove('active');

			var me = this;
			var onTransitionEnd = function(){
				me.el.removeEventListener('webkitTransitionEnd', onTransitionEnd);
				me.el.removeEventListener('msTransitionEnd', onTransitionEnd);
        me.el.removeEventListener('oTransitionEnd', onTransitionEnd);
        me.el.removeEventListener('otransitionend', onTransitionEnd);
        me.el.removeEventListener('transitionend', onTransitionEnd);
        // clear timeout handler, but don't remove the dom
				me.clear();

				if (me.onDismiss) me.onDismiss();
			};
			this.el.addEventListener('webkitTransitionEnd', onTransitionEnd);
			this.el.addEventListener('msTransitionEnd', onTransitionEnd);
      this.el.addEventListener('oTransitionEnd', onTransitionEnd);
      this.el.addEventListener('otransitionend', onTransitionEnd);
      this.el.addEventListener('transitionend', onTransitionEnd);
		}
  });
});
